<template>
  <div class="myTable">
    <el-row class="searchRow">
      <el-input style="width:200px"
                placeholder="关键字"
                prefix-icon="el-icon-search"
                class="mr15"
                v-model="keyword">
      </el-input>
      <el-button type="success" @click="query(1)">查询</el-button>
      <el-button  type="default" @click="clear()" >重置</el-button>
    </el-row>
    <el-table :data="tableData.data" :show-header="true" :header-row-class-name="'tableHead'" :header-cell-class-name="'tableHeadCell'" >
      <el-table-column  type="index" label="NO" :index="indexMethod" width="60px"></el-table-column>
      <el-table-column label="职权类型" width="440px" prop="exerciseSubject">  </el-table-column>
      <el-table-column  label="职权名称" >
        <template slot-scope="scope">
          <el-link type="primary"  class="font24" @click="showDetail(scope.row)">{{scope.row.itemName||scope.row.matterName}}</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="query" style="margin-top: 25px" :current-page="tableData.curPageNO"
                   layout="total,prev, pager, next" :total="tableData.rowsCount" background :page-size="tableData.pageSize"> </el-pagination>

    <el-dialog   width="80%" title="" :fullscreen=false class="fullDialog" :visible.sync="dialogVisible">
      <table style="width: 100%" class="labelClass">
        <tr><td>行使主体</td><td>{{detail.exerciseSubject}}</td></tr>
        <tr><td>职权类型</td><td>{{detail.itemType}}</td></tr>
        <tr><td>职权名称</td><td>{{detail.matterName}}</td></tr>
        <tr><td>子项名称</td><td>{{detail.itemName}}</td></tr>
        <tr><td>备 注</td><td>{{detail.content}}</td></tr>
      </table>
    </el-dialog>
  </div>
</template>
<script>
  /* eslint-disable no-unreachable */
  export default {
    name: "eventLawEnforce",
    data: function() {
      return {
        keyword:"",
        tableData: {},
        dialogVisible:false,
        detail:""
      }
    },
    methods:{
      indexMethod:function(index){
        return (this.tableData.curPageNO-1)*10+index+1;
      },
      query:function(pageNo){
        let vm = this;
        let data = {
          curPageNO:pageNo,
          pageSize:10,
          itemName: vm.keyword.trim(),
          type:vm.type,
        }
        this.$http.post("/yczmq/bigScreen/enforceList/page",window.changeDataType(data)).then(resp => {
          if(resp.status == 0){
            vm.tableData = resp.data;
          }
        })
      },
      clear(){
        this.keyword = "";
      },
      showDetail:function(item){
        let vm = this;
        vm.$http.get("/yczmq/bigScreen/enforceList/get/{id}".replace("{id}",item.id)).then(resp=>{
          vm.detail = resp.data;
          vm.dialogVisible = true;
        })
      }
    },
    created(){
      this.query(1);
    }
  }
</script>
<style scoped>
</style>